<template>
  <div class="invoice">
    <ul v-if="list.length">
      <li @click="routerTo(`invoiceDetail?id=${item.id}`)" class="van-ellipsis" :class="index < list.length - 1 ? 'van-hairline--bottom' : ''" v-for="(item, index) in list" :key="index">{{ item.company }}</li>
    </ul>
    <Empty v-else title="暂时没有任何数据呢..."></Empty>
    <van-button color="#FE9100" class="add-btn" block @click="routerTo('/invoiceManage')">+添加</van-button>
  </div>
</template>

<script>
import { Button } from 'vant';
import Empty from '@components/empty';
import { invoiceTitle_getInvoiceTitleList } from '@api/user';
export default {
  components: {
    Empty,
    [Button.name]: Button
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await invoiceTitle_getInvoiceTitleList();
      if (res.code === 200) {
        this.list = res.data;
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.invoice {
  padding-bottom: 120px;
  ul {
    background: #fff;
    padding: 0 32px;
    li {
      position: relative;
      height: 120px;
      line-height: 120px;
      font-size: 32px;
      padding-right: 50px;
      box-sizing: border-box;
      &:before {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -12px;
        width: 12px;
        height: 23px;
        background: url('../../assets/images/arrow_right.png') no-repeat top;
        background-size: cover;
      }
    }
  }
}
.add-btn {
  position: fixed;
  bottom: 20px;
  left: 30px;
  right: 30px;
  width: calc(100% - 60px);
  box-shadow: 0px 12px 28px 1px rgba(254, 145, 0, 0.3);
  border-radius: 6px;
}
</style>
